<script>
import config from '@/components/FreeForm/minix/config'

export default {
  name: 'Advanced',
  mixins: [config],
  methods: {
    equals(a) {
      return this.type === a
    }
  }
}
</script>

<template>
  <el-form :model="attributes" size="small" label-width="100px" label-position="left">

    <!-- Input   -->
    <template v-if="equals('input')">
      <el-form-item label="最小长度" prop="minLength">
        <el-input v-model="attributes.minLength" />
      </el-form-item>
      <el-form-item label="最大长度" prop="maxLength">
        <el-input v-model="attributes.maxLength" />
      </el-form-item>
      <el-form-item label="前缀图标" prop="prefixIcon">
        <el-input v-model="attributes.prefixIcon" />
      </el-form-item>
      <el-form-item label="后缀图标" prop="suffixIcon">
        <el-input v-model="attributes.suffixIcon" />
      </el-form-item>
      <el-form-item label="显示字数" prop="showWordLimit">
        <el-input v-model="attributes.showWordLimit" />
      </el-form-item>
    </template>

    <!-- Select   -->
    <template v-if="equals('select')">
      <el-form-item label="选项" prop="options">
        <el-input v-model="attributes.options" />
      </el-form-item>
      <el-form-item label="默认值" prop="defaultValue">
        <el-input v-model="attributes.defaultValue" />
      </el-form-item>
      <el-form-item label="占位符" prop="placeholder">
        <el-input v-model="attributes.placeholder" />
      </el-form-item>
      <el-form-item label="远程搜索" prop="remote">
        <el-input v-model="attributes.remote" />
      </el-form-item>
      <el-form-item label="远程搜索方法" prop="remoteMethod">
        <el-input v-model="attributes.remoteMethod" />
      </el-form-item>
      <el-form-item label="远程搜索参数" prop="remoteParams">
        <el-input v-model="attributes.remoteParams" />
      </el-form-item>
    </template>

    <!-- Date   -->
    <template v-if="equals('date')">
      <el-form-item label="日期格式" prop="format">
        <el-select v-model="attributes.format">
          <el-option label="yyyy-MM-dd" value="yyyy-MM-dd" />
          <el-option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss" />
        </el-select>
      </el-form-item>
      <el-form-item label="默认值" prop="defaultValue">
        <el-input v-model="attributes.defaultValue" />
      </el-form-item>
      <el-form-item label="开始时间占位符" prop="startPlaceholder">
        <el-input v-model="attributes.startPlaceholder" />
      </el-form-item>
      <el-form-item label="结束时间占位符" prop="endPlaceholder">
        <el-input v-model="attributes.endPlaceholder" />
      </el-form-item>
      <el-form-item label="对齐方式" prop="align">
        <el-select v-model="attributes.align" placeholder="请选择">
          <el-option label="左对齐" value="left" />
          <el-option label="居中" value="center" />
          <el-option label="右对齐" value="right" />
        </el-select>
      </el-form-item>
      <el-form-item label="显示类型" prop="type">
        <el-select v-model="attributes.type" placeholder="请选择">
          <el-option label="日期时间" value="datetime" />
          <el-option label="年" value="year" />
          <el-option label="月" value="month" />
          <el-option label="日" value="date" />
          <el-option label="周" value="week" />
          <el-option label="日期时间范围" value="datetimerange" />
          <el-option label="年月" value="monthrange" />
        </el-select>
      </el-form-item>
    </template>

  </el-form>
</template>

<style scoped lang="scss">

</style>
